<script setup>
import { message } from "ant-design-vue";
import { ref, onMounted, watch } from "vue";
import { useRouter } from "vue-router";
import { getUserList, deleteUser } from "@/service/services.js";
import { useAccountStore } from "@/stores/account.js";
const account = useAccountStore();
const tableHeight = ref(0);
const value = ref("");

const id = ref("");
const open = ref(false);
const data = ref([]);
const page = ref(1);
const pageSize = ref(15);
const totals = ref(1);
const pageSizeChange = (current, size) => {
  page.value = current;
  pageSize.value = size;
  getInfo();
};
const pageChange = (current, size) => {
  page.value = current;
  pageSize.value = size;
  getInfo();
};
const pagination = ref({
  // 表格分页的配置
  pageSize,
  current: page,
  total: totals,
  showTotal: (totals) => `共 ${totals} 条`,
  onShowSizeChange: pageSizeChange,
  onChange: pageChange,
});
const columns = [
  {
    title: "操作",
    key: "operation",
    fixed: "left",
    width: 180,
  },
  {
    title: "账号",
    dataIndex: "account",
    key: "account",
  },
  {
    title: "用户级别",
    dataIndex: "level",
    key: "level",
  },
  {
    title: "创建时间",
    dataIndex: "createDate",
    key: "createDate",
  },
  {
    title: "最后一次登录时间",
    dataIndex: "lastLoginDate",
    key: "lastLoginDate",
  },
];
const router = useRouter();
const getInfo = () => {
  account.spinning = true;
  getUserList({
    account: value.value,
    pageNum: page.value,
    pageSize: pageSize.value,
  })
    .then((res) => {
      data.value = res.list;
      totals.value = res.total;
      account.spinning = false;
    })
    .catch((err) => {
      account.spinning = false;
      message.error(err);
    });
};
onMounted(() => {
  tableHeight.value = document.getElementById("main").offsetHeight - 220;
  getInfo();
});
watch(
  () => account.currentPrograme,
  (_val, oldVal) => {
    getInfo();
  },
);
const onSearch = (searchValue) => {
  getInfo();
};
const del = (i) => {
  id.value = i.id;

  open.value = true;
};
const handleOk = () => {
  account.spinning = true;
  deleteUser({ id: id.value })
    .then((res) => {
      open.value = false;
      getInfo();
    })
    .catch((err) => {
      account.spinning = false;
      message.error(err);
    });
};
const edit = (i) => {
  console.log(i);
  router.push({ path: "/main/account/edit", query: i });
};
const add = () => {
  router.push({ path: "/main/account/edit" });
};
</script>

<template>
  <section class="operation">
    <a-input
      v-model:value="value"
      placeholder="请输入账号"
      @pressEnter="onSearch"
      :style="{ marginLeft: '10px', width: '150px' }"
    />
    <section>
      <a-button type="primary" @click="onSearch">查询</a-button>
      <a-button type="primary" @click="add" :style="{ marginLeft: '10px' }"
        >新增</a-button
      >
    </section>
  </section>
  <a-table
    :columns="columns"
    :data-source="data"
    :pagination="pagination"
    :scroll="{ y: tableHeight }"
  >
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'operation'">
        <section class="col">
          <a-button
            type="primary"
            ghost
            :style="{ marginRight: '10px' }"
            @click="edit(record)"
            >修改</a-button
          >
          <a-button type="primary" danger ghost @click="del(record)"
            >删除</a-button
          >
        </section>
      </template>
      <template v-if="column.key === 'level'">
        <section v-if="record.level === '1'">一级用户</section>
        <section v-if="record.level === '2'">二级用户</section>
        <section v-if="record.level === '3'">三级用户</section>
      </template>
    </template>
  </a-table>
  <a-modal
    v-model:open="open"
    title="删除"
    centered
    @ok="handleOk"
    @cancel="open = false"
    okText="确认"
    cancelText="取消"
    :closable="false"
    :keyboard="false"
    :maskClosable="false"
  >
    <p>确认删除该条数据？</p>
  </a-modal>
</template>

<style scoped>
.operation {
  display: flex;
  align-content: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.col {
  display: flex;
  align-content: center;
  justify-content: space-between;
}
</style>
